/**
 * 重点客户分析
 * @author yuan_rz
 * @date 2019/12/05 10:10
 */
define(['plugins/echarts/echarts.min'], function (echarts) {

    var self,
        app = win.app,
        doc = document,
        layui = win.layui,
        table,
        vueData = {
            dataList: [],
            form: {
                DATE_LIST: [],
                DATE_START: '',
                DATE_END: '',
                REGION: '3',
                AREA: '',
                ORGANIZE: ''
            },
            chart: {
                nameList: [],
                saleList: []
            }
        },
        cols = [[
              {field: 'ROW_ID', width: 60, title: '排名', fixed: 'left'}
            , {field: 'CUSTOMER', width: 100, title: '客户名称'}
            , {field: 'AREA', width: 100, title: '归属区域'}
            , {field: 'ORGANIZE', width: 100, title: '归属组织'}
            , {field: 'SUM_SALE', width: 100, title: '实际销售额'}
        ]],
        moduleName = '重点客户'
    ;

    app.newModule({
        init: function () {
            self = this;
            self._super({
                _tag: 'zdkh',
                _loadTplsFull: [{
                    dom: 'common_open_window', tpl: 'common/_open_window'
                }]
            }, win);
        },
        initTable: function () {
            layui.use(['table'], function () {
                table = layui.table;
                table.render({
                    elem: app.getByid(doc, 'zdkh_table'),
                    title: moduleName + '表',
                    id: 'zdkh_table',
                    size: _layuiConfig.ui_size,
                    defaultToolbar: [],
                    height: 'full-400',
                    cols: cols,
                    data: vueData.dataList,
                    loading: false,
                    page: true,
                    done: function (res, curr, count) {

                    }
                });
            });
        },
        initChart: function () {
            var chartDiv = echarts.init(doc.getElementById('divChart'));

            var option = {
                toolbox: {
                    feature: {
                        dataView: {show: true, readOnly: false},
                        saveAsImage: {show: true}
                    }
                },
                title: {
                    x: 'center',
                    y: 'top',
                    text: '重点客户'
                },
                grid: {
                    left: '3%',
                    right: '10%',
                    bottom: '3%',
                    containLabel: true
                },
                tooltip: {
                    trigger: 'axis',
                },
                xAxis: [{
                    name: '客户名称',
                    type: 'category',
                    data: vueData.chart.nameList
                }],
                yAxis: [{
                    name: '实际销售额',
                    type: 'value',
                    axisLabel: {
                        formatter: function (data) {
                            return data;
                        }
                    },
                    splitArea: {
                        show: true
                    }
                }],
                series: [{
                    name: '实际销售额',
                    type: 'bar',
                    data: vueData.chart.saleList,
                    label: {
                        normal: {
                            formatter: function (a) {
                                return a.data;
                            },
                            show: true,
                        }
                    },
                }]
            };
            chartDiv.setOption(option);
        },
        reloadTable: function () {
            app.ajax({
                xurl: 'bb/zdkh/getListData',
                xdata: vueData.form,
                loading: true,
                cb: function (result) {
                    if (result.ok) {
                        vueData.dataList = result.data.data;
                        var nameList = [];
                        var saleList = [];
                        vueData.dataList.sortByKey("SUM_SALE",true);
                        vueData.dataList.forEach(function (data, index) {
                            data.ROW_ID = index + 1;
                            nameList.push(data['CUSTOMER']);
                            saleList.push(data['SUM_SALE']);
                        });
                        vueData.chart.nameList.pushArray(nameList, true);
                        vueData.chart.saleList.pushArray(saleList, true);
                        self._reloadTable({id: 'zdkh_table', data: vueData.dataList});
                        self.initChart();
                    }
                }
            });
        },
        _ready: function () {
            this._super({
                vue: [{
                    el: '#page',
                    id: 'page',
                    data: vueData,
                    watch: {
                        'form.DATE_LIST': function (newValue, oldValue) {
                            vueData.form.DATE_START = newValue[0];
                            vueData.form.DATE_END = newValue[1];
                            self.reloadTable();
                        },
                        'form.AREA': function (newValue, oldValue) {
                            self.reloadTable();
                        },
                        'form.ORGANIZE': function (newValue, oldValue) {
                            self.reloadTable();
                        }
                    },
                    methods: {
                        openAreaWindow: function () {
                            self._openTplFull({
                                tag: 'common_open_window',
                                tagData: {
                                    config: {
                                        columnList: [{label: '区域编号', prop: 'GWAD002', width: '150'},
                                            {label: '区域名称', prop: 'GWADL004', width: '150'},
                                            {label: '助记码', prop: 'GWADL005', width: '150'}],
                                        url: 'qry/getDataList',
                                        searchParam: {
                                            method: 'q_gwad002'
                                        }
                                    },
                                    cb: function (data) {
                                        vueData.form.AREA = data.GWADL004;
                                    }
                                },
                                index: 0,
                                openOpts: {
                                    title: '选择区域',
                                    area: ['600px', '465px']
                                }
                            });
                        },
                        openOrganizeWindow: function () {
                            self._openTplFull({
                                tag: 'common_open_window',
                                tagData: {
                                    config: {
                                        columnList: [{label: '组织编号', prop: 'ID', width: '150'},
                                            {label: '组织名称', prop: 'NAME', width: '150'}],
                                        url: 'qry/getDataList',
                                        searchParam: {
                                            method: 'q_sysorg_id'
                                        }
                                    },
                                    cb: function (data) {
                                        vueData.form.ORGANIZE = data.NAME;
                                    }
                                },
                                index: 0,
                                openOpts: {
                                    title: '选择组织',
                                    area: ['600px', '465px']
                                }
                            });
                        }
                    }
                }]
            });
            self.initTable();
        },
        _lazy: function () {
            this._super();
            setTimeout(function(){
                var date = new Date();
                var dateStart = new Date(date.getFullYear(), date.getMonth(), 1);
                var monthLength = new Date(date.getFullYear(), date.getMonth() + 1, 0).getDate();
                var dateEnd = new Date(date.getFullYear(), date.getMonth(), monthLength);
                var dateList = [];
                dateList.push(dateStart.Format('yyyy-MM-dd'));
                dateList.push(dateEnd.Format('yyyy-MM-dd'));
                vueData.form.DATE_LIST.pushArray(dateList, true);
            }, 1000);
        }
    });
});